<template>
  <div class="screen-container-main-center">
    <div class="environment">
      <div class="screen-container-main-content">
        <div class="screen-container-main-title">
          园区环境
        </div>
        <a-row type="flex" justify="space-between">
          <a-col class="environment-decoration" v-for="item in environmentList" :key="item.title">
            <img class="decoration-bg" src="../../../assets/largeScreen-img/u11.svg" alt="" />
            <dv-decoration-12 class="decoration-12" style="width:64px;height:64px;">
              <img class="decoration-img" :src="item.img" alt="" />
            </dv-decoration-12>
            <p>{{ item.title }}</p>
            <p>{{ mergeEnvironment(item) }}</p>
          </a-col>
        </a-row>
      </div>
    </div>
    <dv-border-box-1 class="video">
      <div class="screen-container-main-content">
        <div class="screen-container-main-title">
          学校教学教研活动展示
        </div>
        <div class="video-box" style="height: 87%;">
          <video :src="getImgView(video)" controls ref="videoPlayer" autoplay muted loop style="width:100%;height: 100%;object-fit: cover"></video>
        </div>
      </div>
    </dv-border-box-1>
  </div>
</template>
<script>
import u22 from "@/assets/largeScreen-img/u22.png";
import u23 from "@/assets/largeScreen-img/u23.png";
import u24 from "@/assets/largeScreen-img/u24.png";
import u25 from "@/assets/largeScreen-img/u25.png";
import u26 from "@/assets/largeScreen-img/u26.png";
import u27 from "@/assets/largeScreen-img/u27.png";
import u16 from "@/assets/largeScreen-img/u16.png";
import { getAction , getFileAccessHttpUrl} from "@/api/manage.js";
export default {
  name: 'center',
  data() {
    return {
      environmentList:[
        { img: u25, title: '温度',val:"", key:"temperature", unit:"℃"},
        { img: u24, title: '湿度',val:"",key:"humidity",unit:"%" },
        { img: u23, title: '二氧化碳' ,val:"",key:"co2",unit:"PPM" },
        { img: u16, title: '有机化合物',val:"",key:"tvoc",unit:"μg/m³" },
        { img: u22, title: 'PM2.5', val:"",key:"pm25",unit:"μg/m³" },
        { img: u26, title: 'PM10', val:"",key:"pm10",unit:"μg/m³" },
        { img: u27, title: '甲醛',val:"", key:"ch2o",unit:"mg/m³" },
      ],
    }
  },
  components: {},
  props:{
    video:String  
  },
  filters: {},

  computed: {

  },

  created() {
    this.getEnvironment();
  },

  activated() {},

  mounted() {
  },

  methods: {
    /* 图片预览 */
    getImgView(text){
      if(text && text.indexOf(",")>0){
        text = text.substring(0,text.indexOf(","))
      }
      return getFileAccessHttpUrl(text)
    },
    mergeEnvironment(item){
      if (item.val) {
        return item.val +" " +item.unit
      }else{
        return "--"
      }
    },
    getEnvironment(){
      const url = "/environment/skEnvironment/queryNow"
      getAction(url).then((res)=>{
        if(res.success){
          this.environmentList.forEach(item=>{
            item.val = res.result[item.key].toFixed(2)
            this.environmentList[0].val = res.result.temperature.toFixed(0)
          })
        } else {
          this.$message.warning(res.message);
        }
      }).catch((error)=>{
        console.error(error);
      })
    }
  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>
